
<span id="counterrequestfriend"></span>

<a href="#" id="requestsNotif"><img src="<?=BASE_URI?>img/icons/FinalNavAddIcon.png"></a>



		<div id="friendrequestContainer">
			<div class="large-12 column" id="titleNotif"><a style="color:#3d3d3d;">Connection Request</a></div>
			<div id="bodyNotif" class="notifications">

			<!--Friend Request Accepted-->

			<?php foreach(ConnectionRequestTb::listRequest($this->session->get('user_id')) as $value){?>
				<div id="container_id_<?=$value->crt->id?>"class="notif-ol large-12 column listRequest" onclick="location.href='#';">
					<div class="medium-2 large-2 column">
						<img class="dp" src="<?=IMAGE_URL_SMALL.$value->uat->profile_pic ?>">
					</div>
					<div class="medium-10 large-10 column">
						<div class="time large-12 column">
							<div class="large-12 column">
								<p><a target="_blank" href="<?=BASE_URI.'profile?bhd='.$value->uat->id?>"><?= $value->uat->fname.' '.$value->uat->lname.' ' ?></a><span>  wants to connect with you.</span></p>
							</div>
							<div class="reqbtns large-12 column">
								<a id="btnAcceptRequest"  data-sender-id="<?=$value->crt->sender_id?>" data-receiver-id="<?= $value->crt->receiver_id?>" data-container-id="<?=$value->crt->id?>" class="acc tiny radius button btnAcceptRequest">Accept</a>
								<a class="dec tiny radius button">Decline</a>
							</div>
						</div>
					</div>
				</div>
			<?php } ?>
			<div id="footerNotif"><a href="#">See All</a></div>
		</div>



<script type="text/template" id="requestTpl">
	<div id="container_id_{{id}}"class="notif-ol large-12 column listRequest" onclick="location.href='#';">
					<div class="medium-2 large-2 column">
						<img class="dp" src="{{profile_pic}}">
					</div>
					<div class="medium-10 large-10 column">
						<div class="time large-12 column">
							<div class="large-12 column">
								<p><a href="">{{sender_fullname}}</a><span>  wants to connect with you.</span></p>
							</div>
							<div id="btnAcceptRequest" class="reqbtns large-12 column">
								<a data-sender-id="{{sender_id}}" data-receiver-id="{{receiver_id}}" data-container-id="{{id}}" class="acc tiny radius button btnAcceptRequest">Accept</a>
								<a class="dec tiny radius button">Decline</a>
							</div>
						</div>
					</div>
	</div>
</script>


<script type="text/javascript">

function updateTotalRequest()
{	

	var total = $('.listRequest').length;
	if(total > 0){
		$('#counterrequestfriend').text(total).show();
	}else{
		$('#counterrequestfriend').text('').show();
	}
}

function addToRequest(data)
{
	var template = $('#requestTpl').html();
	var html = Mustache.to_html(template,data);
	$('#bodyNotif').prepend(html);
}

function acceptRequest(sender_id,receiver_id){
	var params = {};
	params.sender_id = sender_id;
	params.receiver_id = receiver_id;
	return $.ajax({
		data: params,
		type: 'post',
		url: URL + 'connections/acceptRequest',
		dataType: 'json'
	});
}

$(function(){
	var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', URL + '/media/friendrequest.mp3' );
   // $.get();
    audioElement.addEventListener("load", function() {
    
    }, true);

	
	var pusher = new Pusher(PUSHER_APP_KEY);
	var channel = pusher.subscribe('my-channel');
	
	channel.bind('request-sent', function(data) {
		if(data.receiver_id == SS_USER_ID)
		{
			// ADD TO NOTIFICATION
			addToRequest(data);

			audioElement.play();

			// UPDATE TOTAL COUNT
			updateTotalRequest();
		}
	});
});	

	
$(document).ready(function() {

	$('#bodyNotif').on('click','.btnAcceptRequest',function(){
		var sender_id = $(this).attr('data-sender-id');
		var receiver_id = $(this).attr('data-receiver-id');
		var container_id = $(this).attr('data-container-id');	
		var loading = '<img src="' + URL + 'img/loading.gif"/> Processing.. ';
		$(this).parent().html(loading);		
			acceptRequest(sender_id,receiver_id).done(function(result){
					if(result.status){
						$('#container_id_' + container_id).fadeOut('slow',function(){
							$(this).remove();
						});
					}
			});
	});
});
</script>
